<!--
 * @Description: Stay hungry，Stay foolish
 * @Author: ''
 * @Date: 2023-10-10 22:24:26
 * @LastEditTime: 2023-10-10 23:19:41
 * @LastEditors: ''
-->
<template>
  <table class="haloe-calendar-table" cellspacing="0" cellpadding="0">
    <thead>
      <th v-for="item in finalWeekDays" :key="item">{{ item }}</th>
    </thead>
    <tbody>
      <tr v-for="(item, index) in chunkDays" :key="index">
        <td v-for="date in item" :key="date.text" @click="handleCellClick(date)" @contextmenu.prevent="handleCellContextmenu(date)">
          <div
            class="haloe-calendar-table-day"
            :class="{ 'haloe-calendar-table-day-other': date.type !== 'current', 'haloe-calendar-table-day-current': date.text === currentDate }"
            :style="dayStyles"
            @click="handleClickDate(date.text)"
          >
            <div class="haloe-calendar-table-day-title">{{ date.date }}</div>
            <div class="haloe-calendar-table-day-slot">
              <slot :date="new Date(date.date)" :data="{ type: date.type + '-month', day: date.text, selected: date.text === currentDate }" name="month"></slot>
            </div>
          </div>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import dayjs from "dayjs"
import chunk from 'lodash.chunk';
import {inject,ref,computed} from "vue"

defineOptions({
  name: 'CalendarMonth'
})

const emits=defineEmits(['on-cell-click', 'on-cell-contextmenu'])

const CalendarInstance=inject('CalendarInstance')
const props=defineProps({
  date: Object
})

let firstDayOfWeek= ref(CalendarInstance.firstDayOfWeek.value)
let weekDays=ref(CalendarInstance.locale.value.weekDays)

const finalWeekDays=computed(()=>{
  return weekDays.value.slice(firstDayOfWeek.value).concat(weekDays.value.slice(0, firstDayOfWeek.value));
})

const days=computed(()=> {
  let _days = [];
  const firstDate = dayjs(props.date.format('YYYY-MM-01'));
  const firstDay = firstDate.day();
  const _firstDayOfWeek = firstDayOfWeek.value;
  const prevMonthDaysCount = _firstDayOfWeek <= firstDay ? firstDay - _firstDayOfWeek : 7 - (_firstDayOfWeek - firstDay);

  for (let i = 0; i < prevMonthDaysCount; i++) {
    const day = firstDate.subtract(prevMonthDaysCount - i, 'day');
    const date = {
      text: day.format('YYYY-MM-DD'),
      date: day.format('D'),
      type: 'prev'
    };
    _days.push(date);
  }

  const daysInMonth = firstDate.daysInMonth();
  for (let i = 0; i < daysInMonth; i++) {
    const day = firstDate.add(i, 'day');
    const date = {
      text: day.format('YYYY-MM-DD'),
      date: day.format('D'),
      type: 'current'
    };
    _days.push(date);
  }

  const nextMonthDaysCount = 42 - _days.length;
  const nextMonthFirstDay = firstDate.add(1, 'month');
  for (let i = 0; i < nextMonthDaysCount; i++) {
    const day = nextMonthFirstDay.add(i, 'day');
    const date = {
      text: day.format('YYYY-MM-DD'),
      date: day.format('D'),
      type: 'next'
    };
    _days.push(date);
  }

  return _days;
})

const chunkDays=computed(()=> {
  return chunk(days.value, 7);
})

const {cellHeight,handleChangeDate,onCellClick,onCellContextmenu}=CalendarInstance

const dayStyles=computed(()=> {
  let style = {};

  // if (CalendarInstance.cellHeight !== 100) {
  //   style.height = `${CalendarInstance.cellHeight}px`;
  // }
  if (cellHeight.value !== 100) {
    style.height = `${cellHeight.value}px`;
  }

  return style;
})
const currentDate=computed(()=> {
  return props.date.format('YYYY-MM-DD');
})

const handleClickDate= (date)=> {
  // CalendarInstance.handleChangeDate(dayjs(date));
  handleChangeDate(dayjs(date));
}

const handleCellClick =(data)=> {
  // this.CalendarInstance.$emit('on-cell-click', data);
  onCellClick(data)
}
const handleCellContextmenu= (data)=> {
  // this.CalendarInstance.$emit('on-cell-contextmenu', data);
  onCellContextmenu(data)
}
</script>